<!--
 * @Author: yangfan 1437446666@qq.com
 * @Date: 2023-02-25 13:51:18
 * @LastEditors: yangfan 1437446666@qq.com
 * @LastEditTime: 2023-03-08 18:11:55
 * @FilePath: \creation-platform-113\src\components\knowledgeBooklet\index.vue
 * @Description: 知识小测
-->
<template>
  <div class="knowledge-con">
    <a-card hoverable>
      <template #cover>
        <img
          alt="example"
          :src="item.cover"
          :style="{ width: '100%', height: '150px' ,objectFit:'cover'}"
        />
      </template>
      <template #actions>
        <edit-outlined key="edit" @click="edit_kowledge" />
        <setting-outlined key="setting" @click="set_knowledge" />
        <a-tooltip placement="top">
          <template #title> 发布上线</template>
          <cloud-upload-outlined key="upload" />
        </a-tooltip>
        <a-popconfirm
          title="你确定删除吗"
          ok-text="确定"
          cancel-text="取消"
          @confirm="confirm"
          @cancel="cancel"
        >
          <DeleteOutlined />
        </a-popconfirm>
      </template>
      <a-card-meta :title="item.title" :description="item.summary">
      </a-card-meta>
    </a-card>
  </div>

</template>

<script lang="ts">
import {
  SettingOutlined,
  EditOutlined,
  EllipsisOutlined,
  CloudUploadOutlined,
  DeleteOutlined
} from '@ant-design/icons-vue'
import type { PropType } from 'vue'
interface knowledgeListtType {
  [key: string]: string
}
import { DEleteHttp, echoKnowledge } from '@/api/knowledge'
import { defineComponent, reactive, ref } from 'vue'
export default defineComponent({
  props: {
    item: {
      type: Object as PropType<knowledgeListtType>
    }
  },
  name: 'KnowBook',
  components: {
    SettingOutlined,
    EditOutlined,
    EllipsisOutlined,
    CloudUploadOutlined,
    DeleteOutlined
  },
  setup(props, contex) {

    //编辑小册
    const edit_kowledge = async () => {
      console.log('编辑小册')
    }
    //删除小册
    const del_knowledge = async () => {
      console.log('删除小册')
    }
    //设置小册
    const set_knowledge = async () => {
       contex.emit('SETknowledge',props.item.id)

    }
    //回显小册
    const echo_knowledge = async () => {
      console.log('回显小册')
    }


    //删除按钮
    const HandDelete = (e) => {
      console.log(e)

      // console.log('删除')

      // const result = await deleteFile(List.details.id)

      // HandDrawer()
      // get_fileList()
    }
    //同意删除的接口
    const confirm = async () => {
      // console.log(props.item.id);
      const result = await DEleteHttp(props.item.id)
      // console.log(result)
      contex.emit('DEleteHttp', '重新加载')
    }
    const cancel = () => {
      console.log('取消')
    }
    /**@default 接口的调用 */
    // del_knowledge()
    // echo_knowledge()
    // set_knowledge()
    return {
      del_knowledge,
      set_knowledge,
      edit_kowledge,
      HandDelete,
      confirm,
      cancel
    }
  }
})
</script>

<style lang="scss">
.knowledge-con {
  width: 350px;
  height: 300px;
  padding: 20px;
}
</style>
